<template>
  <div class="answer-body">
    <el-container>
      <el-header class="answer-title">模拟练习</el-header>
      <el-main>
        <div class="answer-main">
          <el-form
            class="answer-form"
            :rules="rules"
            :model="form"
            ref="form">
            <el-form-item label="题库范围" prop="bankIds">
              <el-select v-model="form.bankIds" multiple placeholder="请选择">
                <el-option
                    v-for="item in formDefault.bankIds"
                    :key="item.id"
                    :label="item.bankName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出题标签" prop="tags">
              <el-select v-model="form.tags" multiple placeholder="请选择">
                <el-option
                    v-for="item in formDefault.tags"
                    :key="item.id"
                    :label="item.tag"
                    :value="item.tag">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出题难度" prop="difficulty">
              <el-select v-model="form.difficulty" clearable placeholder="请选择">
                <el-option
                    v-for="item in formDefault.difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出题数量" style="margin-left: 10px">
              <el-input-number
                  :min="5"
                  :max="50"
                  v-model="form.count"
                  :step="5"
                  step-strictly></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="success" class="answer-form-button" @click="exam">开始答题</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { get, post } from '@/plugins/axios'

export default {
  name: "answer",
  created() {
    this.getQuestionBankData()
    this.getTags()
  },
  data() {
    const module = '/paper'
    return {
      uri: {
        getQuestionBank: '/questionBank/ownerBank',
        getTags: '/questionTags/selectAll',
        examPaper: module + '/examPaper'
      },
      form: {
        userId: this.$store.getters.GET_ACCOUNT.id == null ? '': this.$store.getters.GET_ACCOUNT.id,
        bankIds: [],
        tags: [],
        difficulty: '',
        count: 5
      },
      formDefault: {
        bankIds: [],
        tags: [],
        difficulty: [
          {label: '简单', value: 1},
          {label: '中等', value: 2},
          {label: '困难', value: 3}
        ]
      },
      rules: {
        bankIds: [
          {required: true, message: '请选择至少一个题目', trigger: 'blur'}
        ],
        tags: [
          {required: true, message: '请选择至少一个标签', trigger: 'blur'}
        ],
        difficulty: [
          {required: true, message: '请选择难度', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    getQuestionBankData() {
      const params = {
        userId: this.$store.getters.GET_ACCOUNT.id
      }
      get(this.uri.getQuestionBank, params, response => {
        if (response.code === 200) {
          for (const key in response.data) {
            this.formDefault.bankIds.push({
              id: response.data[key].id,
              bankName: response.data[key].bankName
            })
          }
        }
      })
    },
    getTags() {
      get(this.uri.getTags, {}, response => {
        if (response.code === 200) {
          for (const key in response.data) {
            this.formDefault.tags.push({
              id: response.data[key].id,
              tag: response.data[key].tag
            })
          }
        }
      })
    },
    exam() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          post(this.uri.examPaper, this.form, response => {
            if (response.code === 200) {
              this.$store.commit('SET_QUESTION_LIST', response.data)
              this.$router.push({
                path: '/answer/paper',
                query: {
                  bankIds: this.form.bankIds
                }
              })
            }
          })
        } else {
          return false
        }
      });
    }
  }
}
</script>

<style scoped lang="less">
.answer-body {
  padding: 5px 10px 20px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;
  .answer-title {
    text-align: center;
    font-size: 30px;
    margin-top: 10px;
  }
  .answer-main {
    width: 100%;
    height: 100%;
    .answer-form {
      width: 350px;
      margin: 0 auto;
      border: 1px solid #eaeaea;
      background: #fff;
      padding: 35px 35px 15px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      .answer-form-button {
        margin-left: 115px;
      }
    }
  }
}
</style>